<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	html,body{
		width:250px;
		height:370px;
		background-color:#fdfdfd;
		margin: 0px;
		border:none;
		font-family:"Segoe UI","Microsoft Yahei";
		overflow:hidden;
	}
	#top{
		width:100%;
		height:45px;
		background-color: #34495E;
		color:#fdfdfd;
		font-size: 20px;
		overflow: hidden;
		text-align: center;
		line-height: 2;
	}
	.addInput{
		margin-left: 4px;
		margin-top: 5px;
		padding-left:10px;
		padding-right: 9px;
		font-size:15px;
		width:242px;
		height:35px;
		border-radius:35px;
		outline: none;
		border:#ECF0F1 1px solid;
		color:#34495E;
		font-family:"Segoe UI","Microsoft Yahei";
		margin-top: 20px;
		white-space:nowrap; 
		text-overflow:ellipsis;
		font-size: 16px;
	}
	#theTitle{
		color:#34495E;
		font-size: 16px;
		margin-left: 4px;
		margin-top: 20px;
	}
	#icon{
		width:100px;
		height: 100px;
		border-radius: 100px;
		background-color: #1ABC9C;
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
		color:#fdfdfd;
		font-size: 34px;
		text-align: center;
		line-height: 100px;
		overflow: hidden;

	}
	#colors{
		width:250px;
		height:70px;
		margin-top: 10px;
		margin-left: 7px;
	}
	.color{
		width:24px;
		height:24px;
		background-clip:content-box;
		padding:2px;
		border:solid transparent 1px; 
		border-radius: 30px;
		float: left;
		margin-left: 4px;
		margin-right: 15px;
		margin-top: 10px;
		cursor: pointer;
	}
	#addBu{
		width:200px;
		height:35px;
		border-radius: 40px;
		-webkit-animation:colorOut 0.3s ease;
		border:none;
		outline: none;
		margin-left:25px;
		margin-top: 5px;
		font-size: 18px;
		color:#fdfdfd;
		text-align: center;
		line-height: 1.8;
		cursor: pointer;
	}
	.addBu{
		background-color: #2ECC71;
		font-family:"Segoe UI","Microsoft Yahei";
	}
@-webkit-keyframes colorIn{
    0% {background-color:#2ECC71; }
    100% {background-color:#27AE60;}
}

@-webkit-keyframes colorOut{
    0% {background-color:#27AE60; }
    100% {background-color:#2ECC71;}
}
	.addBu:hover{
		-webkit-animation:colorIn 0.3s ease;
		background-color:#27AE60;
	}
	.addBu:active{
		background-color:#2ECC71;
	}
#icoBgColor{
	width:250px;
	height:80px;
	margin-top: 16px;
	margin-left: 18px;
}

.icobgColor{
	width:22px;
	height:22px;
	border-radius: 20px;
	border:solid 2px transparent;
	background-color: transparent;
	padding: 2px;
	background-clip: content-box;
	cursor: pointer;
	float: left;
	margin-right:14px; 
	margin-bottom: 10px;
	-webkit-transition:all 0.15s ease;

}
.icobgColor:hover{
	-webkit-transform:scale(1.2);
}
	</style>
	<script src="js/jquery.js"></script>
	<script src="js/background.js"></script>
</head>
<body>
<div id="top" i18n="addCustomItem"></div>
<div id="icon"></div>
<input id="addTitle" type="search" class="addInput" i18n-placeholder="addTitle">
<div id="icoBgColor" style="padding-left:5px;">
	<div class="icobgColor icobgColorPre" style="background-color:#1ABC9C;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#2ECC71;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#33C5C5;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#3498DB;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#9B59B6;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#34495E;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#F1C40F;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#E67E22;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#E74C3C;">
	</div>
	<div class="icobgColor icobgColorPre" style="background-color:#95A5A6;">
	</div>
</div>
<input id="addBu" class="addBu"  type="button" i18n-value="addCustomItem">
</body>
</html>